<!-- McTable.vue -->
<template>
	<Table
		ref="McTable"
		:row-style="{ height: '48px' }"
		:data="data"
		:height="height"
		:border="border"
		v-bind="$attrs"
		v-on="$listeners"
	>
		<!--必须使用div包裹-->
		<div v-if="hasC">
			<TableColumn
				type="selection"
				width="50"
				align="center"
				:reserve-selection="true"
			/>
		</div>
		<TableColumn
			type="index"
			width="50"
			:label="t('序号')"
			align="center"
		/>
		<slot/>
	</Table>
</template>

<script>
import {t} from '../../utils';
import {Table,TableColumn} from 'element-ui'
export default {
	name:'McTable',
	components:{
		Table,TableColumn
	},
	props:{
		data:{
			type:Array,
			default: () => [],
		},
		hasC:{
			type:Boolean,
			default:false,
		},
		height:{
			type:String,
			default:'100%',
		},
		border:{
			type:Boolean,
			default:false,
		},
	},
	data(){
		return {
			t,
		};
	},
	watch:{
		data:{
			handler(val){
				if(!val) return;
				this.doLayout();
			},
			deep:true,
		},
	},
	updated(){
		this.$refs.McTable.doLayout();
	},
	methods:{
		doLayout(){
			setTimeout(() => {
				this.$nextTick(() => {
					this.$refs.McTable.doLayout();
				});
			}, 50);
		},
	},
};
</script>